import React from "react";
import { Row, Col } from "antd";
import GoBack from "@/components/TheGoBack";
import TheImage from "@/components/TheImage";
import "../style/style.less";
import { apiGetAdoptDetails } from '@/request/adopt'

class Details extends React.Component {
  state = {
    dataSource: [],
    petDescribe: '',
    adoptionGuidelines: ''
  };
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { id } = this.props.match.params
    let res = await apiGetAdoptDetails({ petAdoptionId: id })
    if (res.data && res.code === 0) {
      let data = res.data
      let sexLabel = ''
      switch (data.petSex) {
        case '1':
          sexLabel = '雄'
          break;
        case '2':
          sexLabel = '雌'
          break;
        default:
          sexLabel = ''
      }
      let petDetailsFiles = data.petDetailsFiles.split(',')
      let dataSource = [
        {
          title: "宠物类别",
          value: data.petAdoptionVarietyName,
        },
        {
          title: "宠物名称",
          value: data.petName,
        },
        {
          title: "宠物性别",
          value: sexLabel,
        },
        {
          title: "宠物年龄",
          value: data.petAge + "岁",
        },
        {
          title: "宠物所在地区",
          value: `${data.addressProvince} ${data.addressCity} ${data.addressDistrict}`,
        },
        {
          title: "宠物标签",
          value: data.petLabelName,
        },
        {
          title: "封面图",
          value: <TheImage src={data.petShowFile} width={300} height={170} />,
        },
        {
          title: "封面图",
          value: (
            <div style={{ display: "flex", columnGap: 15 }}>
              {
                petDetailsFiles.map(v => {
                  return <TheImage src={v} width={300} height={170} />
                })
              }
            </div>
          ),
        },
      ]
      this.setState({
        dataSource,
        petDescribe: data.petDescribe,
        adoptionGuidelines: data.adoptionGuidelines
      })
    }
  }
  render() {
    const { dataSource, petDescribe, adoptionGuidelines } = this.state;
    return (
      <div className="p-layout-box adopt-editor-box">
        <div>
          <GoBack history={this.props.history} title="宠物领养详情" />
        </div>
        <div className="p-layout-content">
          <div className="title">基本信息</div>
          {dataSource.map((v, i) => {
            return (
              <Row>
                <Col span={3} offset={1}>
                  <div className="text">{v.title}</div>
                </Col>
                <Col>
                  <div className="text">{v.value}</div>
                </Col>
              </Row>
            );
          })}
          <div className="title">宠物描述</div>
          <Row>
            <Col span={22} offset={1}>
              <p>{petDescribe}</p>
            </Col>
          </Row>
          <div className="title">领养须知</div>
          <Row>
            <Col span={22} offset={1}>
              <p>{adoptionGuidelines}</p>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}

export default Details;
